<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    
    <style>
        .time
        {
            
            color: #fff;
        }

        .number
        {
            background-color: red;
            display: inline-block;
            text-align: center;
            padding: 5px 5px;
            width: 30px;
        }

        .separator
        {
            color: #000;
        }
    </style>

</head>
<body>

  <div class="time">
    <span class="number hour">00</span>
     <span class="separator">:</span>
    <span class="number minute">00</span>
     <span class="separator">:</span>
    <span class="number second">00</span>
  </div>

  <script>
    //格式化
    function padLeft(number)
    {
        number+="";
        return number.padStart(2,"0");
    }



    //获取时间元素
    var hour = document.querySelector(".hour");
    var minute  = document.querySelector(".minute");
    var second = document.querySelector(".second");

    //实例化两个时间对象
    var endTime = new Date();
    
    //设置结束时间
    endTime.setHours(24);
    endTime.setMinutes(0);
    endTime.setSeconds(0);
    
    setInterval(function(){
         //计算时间差
    var startTime = new Date();
    var timeLag = (endTime-startTime)/1000;
    //换算
    hour.textContent = padLeft(Math.floor(timeLag/60/60));
    minute.textContent = padLeft(Math.floor(timeLag/60%60));
    second.textContent = padLeft(Math.floor(timeLag%60));    
    },1000)

  </script>
    
</body>
</html>